<!-- 中国地图 -->
<template>
    <div class="map-ball"></div>
    <div class="my-echarts" id="mapChart"></div>
</template>

<script setup lang="ts" name="ChainMapChart">
import axios from "axios";
import request from "@/api/axios/request";
import { ECharts, hookEcharts } from "@/hooks/hookEcharts";

const { echarts } = hookEcharts();

// 飞机
const planePath: string =
    "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

const mapName = "china";
const mapUrl = "map/china.json";
/**
 * 初始化图表
 * @param data
 */
const initChart = (data: any = []): ECharts => {
    const charEle = document.getElementById("mapChart") as HTMLElement;
    const charEch = echarts.init(charEle) as unknown as ECharts;
    const option = buildOption(mapName, data) as EChartsOption;

    // jquery, fetch, axios

    function f1() {
        fetch(mapUrl)
            .then((res) => res.json())
            .then((json) => {
                echarts.registerMap(mapName, json as any);
                charEch.setOption(option);
            })
            .catch((err) => console.log(err));
    }

    function f2() {
        axios
            .get(mapUrl)
            .then((res) => {
                const { statusText, data } = res;
                if (statusText == "OK") {
                    echarts.registerMap(mapName, data as any);
                    charEch.setOption(option);
                }
            })
            .catch((err) => console.log(err));
    }

    function f3() {
        request
            .get(mapUrl)
            .then((res) => {
                const { statusText, data } = res;
                if (statusText == "OK") {
                    echarts.registerMap(mapName, data as any);
                    charEch.setOption(option);
                }
            })
            .catch((err) => console.log(err));
    }
    // f1();
    // f2();
    f3();
    return charEch;
};

function updateChart() {}

function buildOption(mapName: string, data: any): EChartsOption {
    const option: EChartsOption = {
        // map
        geo: {
            map: mapName,
            zoom: 1.5,
            center: [102.848234, 32.82333],
            scaleLimit: { min: 0.8 },
            label: { color: "#fff", show: true },
            emphasis: {
                label: { color: "#fff", show: true },
                itemStyle: {
                    areaColor: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "#073684" },
                            { offset: 1, color: "#2B91B7" },
                        ],
                    },
                },
            },
            roam: false,
            itemStyle: {
                areaColor: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: "#073684" },
                        { offset: 1, color: "#061E3D" },
                    ],
                },
                borderColor: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        { offset: 0, color: "#00F6FF" },
                        { offset: 1, color: "#87ADCB" },
                    ],
                    false,
                ),
                shadowColor: "rgba(10,76,139,1)",
                shadowOffsetY: 0,
                shadowBlur: 60,
                borderWidth: 1,
            },
            tooltip: { show: false },
        },

        // 要显示的散点数据
        series: [
            {
                name: "",
                type: "lines",
                coordinateSystem: "geo",
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: "red", // arrow箭头的颜色
                    symbolSize: 3,
                },
                lineStyle: {
                    color: "#fff",
                    width: 0,
                    curveness: 0.2,
                },
                data,
            },
            {
                name: "",
                type: "lines",
                coordinateSystem: "geo",
                zlevel: 2,
                symbol: ["none", "arrow"],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15,
                },
                lineStyle: {
                    color: "#fff",
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2,
                },
                data,
            },
        ],
    };

    return option;
}

/**
 * 通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：
 */
defineExpose({
    initChart,
    updateChart,
});
</script>

<style scoped lang="less">
.map-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);

    img {
        width: 500px;
        height: 500px;
    }
}

.my-echarts {
    width: 100%;
    height: 100%;
}
</style>

<!--

<script setup lang="ts">

const initChart = (data: any = []): ECharts => {
    const option: EChartsOption = {

        // echarts大小位置
        grid: {
            left: "0px",
            right: "80px",
            top: "10px",
            bottom: "10px"
        },
        
        // 悬浮窗
        tooltip: {
            trigger: "item",
            formatter: function (params: any) {
                return `${params.name}: ${params.value || "-"}`;
            }
        },
    };

    charEch.setOption(option);
    return charEch;
};

</script>
    
-->
